<template>
  <div class="container teachDesignDetails">
    <div class="header-wrap">
      <el-row class="tabNav marBtm">
        <el-col class="titleWrap win-atuo flex-box center" style="width:auto">
          <el-tag class="fl">{{baseInfoForm.original?'原创':"转载"}}</el-tag>
          <h3 class="title padLeft padRig" style="padding-left:5px">{{baseInfoForm.title}}</h3>
        </el-col>
       <!-- <el-col :span="12" class="waysWrap win-atuo">
          <div class="flBox">
            <el-tabs v-model="activeName" class="scrollVertical" @tab-click="onDemo">
              <el-tab-pane
                v-for="(programItem,inds) in programList"
                :key="inds"
                :label="programItem.TeachingDesignName?programItem.TeachingDesignName:'方案'+(inds+1)"
                :name="String(inds)"
              />
            </el-tabs>
            <el-button class="copyBtn" type="danger" @click="onCopy">复制方案</el-button>
          </div>
        </el-col> -->
        <el-col :span="12" class="waysWrap win-atuo">
          <div class="flBox">
            <el-tabs v-model="activeName" class="scrollVertical" @tab-click="onDemo">
              <el-tab-pane
                v-for="(programItem,inds) in programList"
                :key="inds"
                :label="programItem.TeachingDesignName?programItem.TeachingDesignName:'方案'+(inds+1)"
                :name="String(inds)"
              />
            </el-tabs>
            <el-button class="copyBtn" type="danger" @click="onCopy">引用方案</el-button>
          </div>
        </el-col>

        <el-col
          class="t-center win-atuo fr"
          v-show="baseInfoForm.user.userId===$store.getters.userId"
        >
          <el-button
            type="primary"
            @click="$router.push({path:`/createResult/uploadLessonPlanDetails/${baseInfoForm.id}`,params:{'typeRole':baseInfoForm.typeRole}})"
          >编辑</el-button>
          <el-button @click="personPrepareLessonDeleteFn">删除</el-button>
        </el-col>
      </el-row>
      <div class="flex-box marginL20">
        <span v-if="baseInfoForm.user">{{baseInfoForm.user.name}}</span>
        <div class="categoryVoList marginL20">
          <cateStr class="marLeft" :list="baseInfoForm.categoryVOList" :label="'itemName'" />
        </div>
        <div class="coll">
          <cateStr :list="columnTagList" />
          <cateStr class="marLeft" :list="categoryList" />
        </div>
      </div>
    </div>
    <div class="detailsInfo">
      <div class="t-center">
        <el-tabs
          v-model="activeClassTimeIdx"
          is-bordered
          class="classify-tabs"
          @tab-click="clickTimeTab"
        >
          <el-tab-pane
            v-for="(periodItem , i) in programItem.resList"
            :key="i"
            :label="'课时'+ (i+1)"
            :name="i.toString()"
          />
        </el-tabs>
      </div>

      <el-tabs v-model="activeTabName" is-bordered @tab-click="handleClick">
        <el-tab-pane  :key="i" v-for="(item , i) in tabList" :label="item.label" :name="item.name" class="marBtm" />
      </el-tabs>
      <component
        :is="activeTabName"
        :list="indProgress[activeTabName]"
        :teachingDesignResId="indProgress.id"
        :key="activeTabName"
        class="container"
      />
      <!-- <yes-program @addClassTime='addClassTime'  :key="programItem.id" :program-data="programItem" />-->
    </div>
  </div>
</template>

<script>
import {
  getPersonPrepareLessonDetail,
  personPrepareLessonCopy,
  quotePrepareLessonPage,
  personPrepareLessonDelete
} from '@/api/personPrepareLesson';

import YesTabs from '@/components/YesTabs';
import cateStr from '@/components/cateStr';
import resTeaching from './components/TeachingPlan';
import resCoursewareList from './components/Courseware';
import resCourseVideo from './components/CourseVideo';
import resTeachingReflection from './components/TeachingReflection';
import { mapMutations } from 'vuex';
export default {
  components: {
    YesTabs,
    cateStr,
    resTeaching,
    resCoursewareList,
    resCourseVideo,
    resTeachingReflection
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      waysInd: "0",
      activeClassTimeIdx: "0",
      baseInfoForm: { user: {} },
      programList: [],
      programItem: { resList: {} },
      indProgress: {},
      tabList: [
        {
          label: '教案',
          name: 'resTeaching',
        },
        {
          label: '课件',
          name: 'resCoursewareList',
        },
        {
          label: '课堂实录',
          name: 'resCourseVideo',
        },
        {
          label: '教学反思',
          name: 'resTeachingReflection',
        }
      ],
      activeTabName: 'resTeaching',
      activeName: 0,
      oldTabName: ''
    };
  },
  mounted() {},
  computed: {
    columnTagList() {
      var arr = [this.programItem.columnTag];
      return this.getCateList(arr);
    },
    categoryList() {
      return this.getCateList(this.programItem.categoryTagList);
    }
  },
  created() {
    this.getPersonPrepareLessonDetailFn()
  },
  methods: {
    ...mapMutations({
      setTeachingPlanId: 'SET_TEACHING_PLAN_ID', //备课id
    }),
    getCateList(categoryTagList) {
      var arrs = [];
      if (Array.isArray(categoryTagList)) {
        // arr.push(list.groupId)
        categoryTagList.map((list) => {
          if (list) {
            if (list.tags) {
              for (var k in list.tags) {
                arrs.push(list.tags[k]);
              }
            }
          }
        })
      }
      return arrs;
    },
    personPrepareLessonDeleteFn() {
      this.$confirm(`确定删除 ${this.programItem.id}？`).then( async (res) => {
        await personPrepareLessonDelete(this.programItem.id);
      });
    },
    commentBtnFn() {
      this.$refs.teachDesignInfo.validate((val) => {
        if (val) {
          //提交评论
        }
      });
    },

    clickTimeTab(val) {
      this.activeClassTimeIdx = val.name;
      this.indProgress = this.programItem.resList[Number(val.name)];

    },
    handleClick(tab, e) {
      console.log(tab, e);
      this.activeTabName = tab.name;
    },
    onBack() {
      this.$router.push(`/createResult/uploadLessonPlan?id=${this.id}`);
    },
    onDemo(tab, e) {
      if (tab.name !== this.oldTabName) {
        this.programItem = this.programList[Number(tab.name)];
        this.programItem.user = this.baseInfoForm.user;
        this.indProgress = this.programItem.resList[this.activeClassTimeIdx]
      }
    },
    async onCopy() {
      const { data } = await quotePrepareLessonPage({
        teachingDesignId: this.programItem.id,
      })
        this.$router.push({
          name: this.baseInfoForm.typeRole === 'TRAINER'? 'uploadLessonPlanTrainer':'uploadLessonPlan',
          query: { id: data, cp: 1 }
        })
    },
    async getPersonPrepareLessonDetailFn() {
      const params = {
        id: this.id
      }
      const res = await getPersonPrepareLessonDetail(params);
      // res = require('@/api/loc/prepareLessonDetails').details
      console.log("详情", res);
      let { activeTabName, activeClassTimeIdx, activeName } = this;
      this.baseInfoForm = res.data.baseInfo;
      this.programList = res.data.resList;
      this.programItem = res.data.resList[activeName];

      this.indProgress = this.programItem.resList[Number(activeClassTimeIdx)];
      console.log("asdf", this.programItem);
      this.setTeachingPlanId(res.data.baseInfo.id);
    },
  },
};
</script>
<style  lang="scss">
.teachDesignDetails {
  .outer-box {
    header.title {
      border-left: 5px solid #299e64;
      padding: 0;
      padding-left: 6px;
      height: auto;
      line-height: 1.5;
      font-size: 16px;
      font-weight: 600;
      margin: 10px 0;
      border-bottom: none;
    }
    .content {
      padding: 10px;
    }
  }

  .scrollVertical {
    height: 60px;
    width: calc(100% - 120px);
    padding: 0 5px;

    [class*="el-tabs__nav-"] {
      line-height: 60px;
    }
    .el-scrollbar__wrap {
      overflow-y: hidden;
    }
    .el-tabs__nav-scroll {
      padding: 0;
      text-align: right;
      .el-tabs__item {
        display: inline-block;
        // line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        margin: 0 5px;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        font-weight: 500;
        height: 40px;
        line-height: 40px;
        padding: 0 20px !important;
        font-size: 14px;
        border-radius: 4px;
        &.is-active {
          color: #fff;
          background-color: #2eb06f;
          border-color: #2eb06f;
        }
        // &:last-child{
        //   padding-right:0;
        // }
        // &:nth-child(2){
        //   padding-left:0;
        // }
      }

      .el-tabs__active-bar {
        display: none;
      }

      // .el-tabs__nav{float: right;}
    }
  }
}
</style>
<style lang="scss" scoped>
.container {
  padding: 0 40px;

  .header-wrap {
    padding-bottom: 24px;
    .backBtn {
      margin: 40px 0 24px 0;
      width: 120px;
    }
    .tabNav {
      .titleWrap,
      .waysWrap {
      }
      .waysWrap {
        min-width: 20%;
        max-width: 80%;
      }
    }
    .tabNav,
    .el-tabs__nav-next {
      .copyBtn {
        margin: 10px 8px 0;
      }
      h3 {
        line-height: 60px;
      }
      line-height: 60px;
    }
    .info-wrap {
      font-family: MicrosoftYaHei;
      .title {
        font-size: 16px;
        line-height: 24px;
        color: #000;
      }
      .grade {
        font-size: 12px;
        line-height: 24px;
        color: #000;
      }
    }
  }
  .classify-tabs {
    margin: 15px auto;
    width: 45%;
  }
  .report_comment {
    .el-textarea {
      background-color: #d0d2d7;
    }
  }
  //.new_box component
  .new_box {
    padding: 5px;
    .new_list {
      margin-bottom: 15px;
      .rig_box {
        padding-left: 10px;
        .rig_title {
          font-size: 16px;
          padding-bottom: 5px;
        }
      }
      .avatar {
        width: 60px;
        height: 60px;
        display: block;
        border-radius: 50%;
      }
      .timer {
        padding-left: 25px;
      }
    }
  }
}

.wrap {
  width: 100%;
  border-radius: 16px;
  background: #fff;
}
</style>
